<template>
  <div class="search">
    <div class="search-input" v-if="isSearch">
      <form action="javascript:void 0" onsubmit="return false;">
        <input
          type="search"
          v-model="value"
          :placeholder="placeholder"
          style="width: 89%"
          @keyup.13="onSearch"
          :disabled="searchDisabled"
          maxlength="50"
        />
        <img
          v-if="isScreen"
          @click="onScreen"
          class="search-sx"
          src="@/assets/img/shaixuan.png"
          alt=""
        />
      </form>
      <van-popover
        class="add"
        v-has="'inventoryQuery:add'"
        v-if="isAdd && actions.length > 0"
        v-model="showPopover"
        trigger="click"
        :actions="actions"
        :offset="[2, 8]"
        placement="bottom-end"
        @select="onSelect"
      >
        <template #reference>
          <div class="pngNew">
            <img src="~@/assets/img/pngNew.png" alt="" />
            新建
          </div>
        </template>
      </van-popover>
      <div class="add" @click="goAdd" v-if="isAdd && actions.length == 0">
        <div class="pngNew" @click="newBuild">
          <img src="~@/assets/img/pngNew.png" alt="" />
          新建
        </div>
      </div>
      <slot name="rightText"></slot>
    </div>
    <div class="search-input" v-if="!isSearch">
      <van-field
        v-model="value"
        label=""
        :placeholder="placeholder"
        maxlength="50"
        style="width: 89%"
        @click="showCalendar"
        @keyup.13="onSearch"
        disabled
        clear-trigger="always"
        :clearable="true"
        @clear="onSearch"
      />
      <van-calendar
        v-model="formdataShowTime"
        type="range"
        :min-date="minDate"
        :default-date="defaultDate"
        :allow-same-day="true"
        @confirm="onConfirmTime"
        color="#1890FF"
      />
      <div
        class="add"
        :style="{ height: !isSearch ? '0.33rem' : '' }"
        @click="goAdd"
        v-if="isAdd"
      >
        新建
      </div>
    </div>
    <div class="type-list" v-if="isType">
      <div v-if="pagetype == 'pro'">
        <span
          v-for="(item, index) in typeList"
          :class="active == item.id ? 'active' : ''"
          :key="item.id"
          @click="goType(item, index)"
          >{{ item.title }}</span
        >
      </div>
      <div v-else>
        <span
          v-for="(item, index) in typeList"
          :class="active == index ? 'active' : ''"
          :key="item.id"
          @click="goType(item, index)"
          >{{ item.title }}</span
        >
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.van-cell,
.van-field {
  background-color: #f2f2f6;
}
.van-cell {
  padding: 10px 32px;
}
input {
  padding: 4px 0px;
  height: 66px;
  font-size: 32px;
}
@import "~@/assets/theme.scss";
.search {
  background: #fff;
  padding: 32px 32px 12px;
}
.search-input {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
  font-size: $font15;
  justify-content: space-between;
  position: relative;
  .search-sx {
    height: 32px;
    right: 17px;
    position: absolute;
    top: 20px;
  }
  form {
    height: 66px;
    background: $color28;
    border-radius: 3px;
    line-height: 66px;
    padding-left: 28px;
    // width: 80%;
    flex: 1;
    font-size: $font15;
    position: relative;
  }
  .add {
    color: $color4;
    font-size: $font15;
    // text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    // padding-left: 0.16rem;
    // padding-right: 0;
    display: inherit;
    width: 20%;
    margin-left: 32px;
  }
}
.type-list {
  /* overflow: scroll; */
  span {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 3px;
    margin-right: 16px;
    background: $color28;
    text-align: center;
    color: $color5;
    font-size: $font14;
    margin-bottom: 16px;
  }
  /* span:first-child {
    margin: 0px !important;
  }
  span:last-child {
    margin: 0px !important;
  } */
}
.active {
  background: $color1 !important;
  color: $color29 !important;
}

.search-input /deep/ .van-popover__action {
  width: 160px;
}
.pngNew {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-left: 28px;
  border-left: 2px solid #dfdfdf;
  img {
    width: 28px;
    height: 32px;
    margin-right: 8px;
  }
}
</style>
<script>
import moment from "moment";
export default {
  name: "search",
  props: {
    pagetype: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    isAdd: {
      type: Boolean,
      default: false,
    },
    isSearch: {
      type: Boolean,
      default: true,
    },
    typeList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    actions: {
      type: Array,
      default: () => {
        return [];
      },
    },
    isScreen: {
      type: Boolean,
      default: false,
    },
    isType: {
      type: Boolean,
      default: false,
    },
    searchDisabled: {
      type: Boolean,
      default: false,
    },
    TypeAct: {
      type: Number || String,
      default: 0,
    },
  },
  data() {
    return {
      formdataShowTime: false,
      minDate: new Date(2010, 0, 1),
      defaultDate: [new Date(), new Date()],
      active: 0,
      value: "",
      showPopover: false,
    };
  },
  watch: {
    TypeAct(n, o) {
      console.log(n, o);
      if (n || n == 0) {
        this.active = n;
      }
    },
  },
  created() {
    this.active = this.TypeAct;
    console.log(this.active, this.typeList, "console.log(this.active)");
  },
  methods: {
    newBuild() {
      this.$emit("newBuild");
    },
    onSelect(action) {
      this.$emit("clickAction", action.text);
    },
    showCalendar() {
      this.formdataShowTime = true;
    },
    //发生时间
    onConfirmTime(date) {
      const [start, end] = date;
      this.formdataShowTime = false;
      let beginTime = moment(start).format("YYYY-MM-DD");
      let endTime = moment(end).format("YYYY-MM-DD");
      this.value = beginTime + "~" + endTime;
      this.onSearch(this.value);
    },
    onSearch(value) {
      this.$emit("onSearch", this.value);
    },
    goAdd() {
      this.$emit("add");
    },
    onScreen() {
      this.$emit("onScreen");
    },
    goType(item, index) {
      if (this.pagetype == "pro") {
        this.active = item.id;
      } else {
        this.active = index;
      }
      this.$emit("goType", item);
    },
    ClearValue() {
      this.value = "";
    },
  },
};
</script>
